<template>
    <div style="background-color: #fff;margin: 8px;padding: 20px;height: 100%;text-align: left;">
        <div>
            <h1 class="title">设备 - {{ deviceInfo?.name }}</h1>
        </div>
        <div>
            <el-row :gutter="20" style="height: 100%;">
                <el-col :span="8" style="height: 100%;">
                    <el-card style="height: 100%;" shadow="never">
                        <div>
                            <h1 class="title">配置</h1>
                        </div>
                        <div>
                            <el-form label-position="top">
                                <el-form-item label="设备名称">
                                    <el-input placeholder="请输入设备名称。" v-model="deviceInfo.name" />
                                </el-form-item>
                                <el-form-item label="设备介绍">
                                    <el-input placeholder="请输入设备介绍。" v-model="deviceInfo.introduction" />
                                </el-form-item>
                                <el-form-item label="设备Mac">
                                    <el-input placeholder="请输入设备Mac。" v-model="deviceInfo.mac" disabled />
                                </el-form-item>
                                <el-form-item label="设备关联角色智能体">
                                    <el-select placeholder="设备关联角色智能体" v-model="deviceInfo.role_agent_id">
                                        <el-option :label="ra?.name" :value="ra?.id" v-for="ra in roleAgentList"
                                            :key="ra.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="设备音色">
                                    <el-select placeholder="选择设备音色" v-model="deviceInfo.voice">
                                        <el-option :label="v?.alias" :value="v?.name" v-for="v in voiceList"
                                            :key="v.name" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="设备所在地">
                                    <el-input placeholder="请输入设备所在地。" v-model="deviceInfo.location" disabled />
                                </el-form-item>
                                <el-form-item label="">
                                    <el-button style="width: 100%;" type="primary" @click="updateDevice">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16" style="height: 100%;">
                    <el-card style="height: 100%;" shadow="never">
                        <div>
                            <h1 class="title">记忆摘要</h1>
                            <p style="background-color: #f3f4f5;padding:8px 16px;color:#999">{{ deviceInfo?.memory ||
                                "暂无记忆"
                                }}
                            </p>
                        </div>
                        <div>
                            <h1 class="title">对话历史记录</h1>
                        </div>
                        <div style="max-height:350px;padding:10px;overflow: auto;">
                            <div style="max-height:350px ;">
                                <div v-for="(m, index) in deviceInfo?.history" :key="index" style="margin:12px 4px">
                                    <div style="background-color: #409EFF;color: #fff; text-align: right;justify-self:right"
                                        v-if="m.role == 'user'">
                                        <p
                                            style="text-align: right;padding:8px 8px;margin: 2px;border-radius: 8px;width: fit-content;">
                                            {{ m.content }}
                                        </p>
                                    </div>

                                    <div style="background-color: #f4f5f6;text-align: left;justify-self:left"
                                        v-if="m.role == 'assistant'">
                                        <p
                                            style="text-align: left;padding:8px 8px;margin: 2px;border-radius: 8px;width: fit-content;">
                                            {{ m.content }}
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: 0,
            inputDisabled: false,
            form: {
                fileList: []
            },
            deviceInfo: { id: "", character_id: "", location: "", name: "", introduction: "", device_id: "", role_agent_id: null, memory: "", history: [] ,voice:""},
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL,
            VITE_UPLOAD_API_BASE_URL: import.meta.env.VITE_UPLOAD_API_BASE_URL,
            roleAgentList: []
        }
    },
    methods: {
        async getVoiceList() {
            try {
                const response = await fetch(`${import.meta.env.VITE_API_URL}/voiceBank/getVoiceList`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({})
                });
                if (response.status === 401) {
                    localStorage.removeItem('access_token');
                    this.$router.push('/login');
                    return;
                }
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const rs = await response.json();
                console.log("rs:>>:", rs);
                this.voiceList = rs.data;
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
            }
        },
        async getDeviceInfo() {
            try {
                const response = await fetch(`${import.meta.env.VITE_API_URL}/deviceBank/getDeviceInfo`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ id: this.id })
                });
                if (response.status === 401) {
                    localStorage.removeItem('access_token');
                    this.$router.push('/login');
                    return;
                }
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const rs = await response.json();
                console.log("rs:>>:", rs);
                this.deviceInfo = rs.data;
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
            }
        },
        async updateDevice() {
            try {
                const response = await fetch(`${import.meta.env.VITE_API_URL}/deviceBank/updateDevice`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.deviceInfo)
                });
                if (response.status === 401) {
                    localStorage.removeItem('access_token');
                    this.$router.push('/login');
                    return;
                }
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const rs = await response.json();
                console.log("rs:>>:", rs);
                this.getDeviceInfo();
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
            }
        },
        async getRoleAgentList() {
            try {
                const response = await fetch(`${import.meta.env.VITE_API_URL}/roleAgent/getRoleAgentList`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                });
                if (response.status === 401) {
                    localStorage.removeItem('access_token');
                    this.$router.push('/login');
                    return;
                }
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const rs = await response.json();
                console.log("rs:>>:", rs);
                this.roleAgentList = rs.data;
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
            }
        }
    },
    mounted() {
        this.id = this.$route.params.id || 0;
        console.log(this.id);
        this.getDeviceInfo();
        this.getVoiceList();
        this.getRoleAgentList();
    }
}
</script>

<style>
.el-card__body {
    height: 100% !important;
}
</style>
